<template>
  <div>
    <div id="map" class="mapC"></div>
    <div class="eventC" >
      <div>
        <el-button @click="butClick" type="primary">导出</el-button>
        <span>Page size:</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span>Resolution:</span>
        <el-select v-model="valueR" placeholder="请选择">
          <el-option
            v-for="item in optionsR"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import WKT from 'ol/format/WKT'
import {Vector as VectorSource, XYZ} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      dims: {
        a0: [1189, 841],
        a1: [841, 594],
        a2: [594, 420],
        a3: [420, 297],
        a4: [297, 210],
        a5: [210, 148]
      },
      value: '',
      valueR: '',
      options: [
        {
          label: 'A0',
          value: 'a0'
        },
        {
          label: 'A1',
          value: 'a1'
        },
        {
          label: 'A2',
          value: 'a2'
        },
        {
          label: 'A3',
          value: 'a3'
        },
        {
          label: 'A4',
          value: 'a4'
        },
        {
          label: 'A5',
          value: 'a5'
        }
      ],
      optionsR: [
        {
          label: '72 dpi',
          value: 72
        },
        {
          label: '150 dpi',
          value: 150
        },
        {
          label: '300 dpi',
          value: 300
        }
      ]
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      const format = new WKT()
      const feature = format.readFeature(
        'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
        '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
        '-39.1552734375, 10.689697265625 -25.0927734375))'
      )
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857')

      const vector = new VectorLayer({
        source: new VectorSource({
          features: [feature]
        }),
        opacity: 0.5
      })
      this.map = new Map({
        layers: [this.raster, raster2, vector],
        target: 'map',
        view: new View({
          center: [10.689697265625, -25.0927734375],
          zoom: 4
          // projection: 'EPSG:4326'
        })
      })
    },
    butClick () {
      // exportButton.disabled = true;
      // document.body.style.cursor = 'progress';

      // const format = document.getElementById('format').value;
      // const resolution = document.getElementById('resolution').value;
      const dim = this.dims[this.value]
      const width = Math.round((dim[0] * this.valueR) / 25.4)
      const height = Math.round((dim[1] * this.valueR) / 25.4)
      const size = this.map.getSize()
      const viewResolution = this.map.getView().getResolution()

      this.map.once('rendercomplete', () => {
        const mapCanvas = document.createElement('canvas')
        mapCanvas.width = width
        mapCanvas.height = height
        const mapContext = mapCanvas.getContext('2d')
        Array.prototype.forEach.call(
          document.querySelectorAll('.ol-layer canvas'),
          function (canvas) {
            if (canvas.width > 0) {
              const opacity = canvas.parentNode.style.opacity
              mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity)
              const transform = canvas.style.transform
              // Get the transform parameters from the style's transform matrix
              const matrix = transform
                .match(/^matrix\(([^(]*)\)$/)[1]
                .split(',')
                .map(Number)
              // Apply the transform to the export map context
              CanvasRenderingContext2D.prototype.setTransform.apply(
                mapContext,
                matrix
              )
              mapContext.drawImage(canvas, 0, 0)
            }
          }
        )
        // eslint-disable-next-line
        const pdf = new window.jsPDF('landscape', undefined, this.value)
        pdf.addImage(
          mapCanvas.toDataURL('image/jpeg'),
          'JPEG',
          0,
          0,
          dim[0],
          dim[1]
        )
        pdf.save('map.pdf')
        // Reset original map size
        this.map.setSize(this.map.getSize())
        this.map.getView().setResolution(viewResolution)
        // exportButton.disabled = false
        // document.body.style.cursor = 'auto'
      })

      // Set print size
      const printSize = [width, height]
      this.map.setSize(printSize)
      const scaling = Math.min(width / size[0], height / size[1])
      this.map.getView().setResolution(viewResolution / scaling)
    }
  }
}
</script>

<style scoped>
.eventC{
  position: absolute;
  top: 0;
  margin: 20px;
}
</style>
